/* 
  学习目标：useEffect使用第二个参数，模拟生命周期
  第二个参数作用：如果传递了第二个参数，也就依赖项， [ 依赖项1，依赖项2 ...]
  那么在依赖项改变时，才会触发 useEffect，类似 vue - watch
*/

// 1. 导入 useState钩子函数： 声明状态
import React, { useEffect, useState } from 'react';

export default function App() {
  // 返回值是一个数组--[状态变量，更新状态的函数]
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('Hello React');
  // 导入useEffect钩子函数: 会自动执行
  // 注意：useEffect是函数，函数可以调用多次，谁也不影响

  // useEffect(() => {
  //   console.log('useEffect被触发了----->');
  //   document.title = count;
  // });

  // 假如参数为空数组，也就是不监听任何状态，页面的 状态 改变了，都不会影响到我
  // useEffect(() => {
  //   console.log('useEffect被触发了----->');
  //   document.title = count;
  // }, []);

  // // 设置依赖项count，他才会触发，也就是页面更新是，都会触发useEffect
  // useEffect(() => {
  //   // 只会打印count，不会打印msg
  //   console.log('useEffect被触发了----->');
  //   document.title = count;
  // }, [count]);

  // 它在页面挂载完成和更新时，会执行，等价于componentDidMount和componentDidUpdate二合一
  useEffect(() => {
    console.log('useEffect被触发了----->');
    document.title = count;
  }, [count, msg]);

  return (
    <div>
      <h3>count：{count}</h3>
      <h3>msg：{msg}</h3>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我修改count和标题
      </button>
      <button
        onClick={() => {
          setMsg(msg + '啊');
        }}
      >
        点我修改msg
      </button>
    </div>
  );
}
